<template>
 <!-- 维系 - 日看板 -->
  <div>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else class="board-wx-info">
      <div class="board-wx-item bg1">
        <div>5G迁转</div>
        <div class="item-wx-detail">
          <div class="item-wx-info">
            <span class="title">当日值/当月累计</span>
            <span class="value" @click="openPeopleDetail('qz5g',info.QZ_5G_VALUE, info.QZ_5G_M_VALUE, info.QZ_5G_HB)">{{ info.QZ_5G_VALUE || 0 }}/{{ info.QZ_5G_M_VALUE || 0 }}<span class="unit">户</span></span>
          </div>
          <div class="item-wx-percent">
            <span class="title">环比上月</span>
            <span v-if="info.QZ_5G_HB >= 0" class="value up">
              {{ info.QZ_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="value down">
              {{ info.QZ_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
      </div>
      <div class="board-wx-item bg2">
        <div>5G升级包</div>
        <div class="item-wx-detail">
          <div class="item-wx-info">
            <span class="title">当日值/当月累计</span>
            <span class="value" @click="openPeopleDetail('sjb5g', info.SJB_5G_VALUE, info.SJB_5G_M_VALUE, info.SJB_5G_HB)">{{ info.SJB_5G_VALUE || 0 }}/{{ info.SJB_5G_M_VALUE || 0 }}<span class="unit">户</span></span>
          </div>
          <div class="item-wx-percent">
            <span class="title">环比上月</span>
            <span v-if="info.SJB_5G_HB >= 0" class="value up">
              {{ info.SJB_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="value down">
              {{ info.SJB_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
      </div>
      <div class="board-wx-item bg3">
        <div>宽带提速包</div>
        <div class="item-wx-detail">
          <div class="item-wx-info">
            <span class="title">当日值/当月累计</span>
            <span class="value" @click="openPeopleDetail('kdtsb', info.KDTSB_VALUE, info.KDTSB_M_VALUE, info.KDTSB_HB)">{{ info.KDTSB_VALUE || 0 }}/{{ info.KDTSB_M_VALUE || 0 }}<span class="unit">户</span></span>
          </div>
          <div class="item-wx-percent">
            <span class="title">环比上月</span>
            <span v-if="info.KDTSB_HB >= 0" class="value up">
              {{ info.KDTSB_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="value down">
              {{ info.KDTSB_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
      </div>
      <div class="board-wx-item bg4">
        <div>宽带续约</div>
        <div class="item-wx-detail">
          <div class="item-wx-info">
            <span class="title">当日值/当月累计</span>
            <span class="value" @click="openPeopleDetail('kdxy', info.KDXY_VALUE, info.KDXY_M_VALUE, info.KDXY_5G_HB)">{{ info.KDXY_VALUE || 0 }}/{{ info.KDXY_M_VALUE || 0 }}<span class="unit">户</span></span>
          </div>
          <div class="item-wx-percent">
            <span class="title">环比上月</span>
            <span v-if="info.KDXY_5G_HB >= 0" class="value up">
              {{ info.KDXY_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="value down">
              {{ info.KDXY_5G_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
      </div>
      <div class="board-wx-item bg5">
        <div>套餐升档</div>
        <div class="item-wx-detail">
          <div class="item-wx-info">
            <span class="title">当日值/当月累计</span>
            <span class="value" @click="openPeopleDetail('tcsd', info.TCSD_VALUE, info.TCSD_M_VALUE, info.TCSD_HB)">{{ info.TCSD_VALUE || 0 }}/{{ info.TCSD_M_VALUE || 0 }}<span class="unit">户</span></span>
          </div>
          <div class="item-wx-percent">
            <span class="title">环比上月</span>
            <span v-if="info.TCSD_HB >= 0" class="value up">
              {{ info.TCSD_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
            </span>
            <span v-else class="value down">
              {{ info.TCSD_HB }}%
              <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import { morningDaySustain } from '@/api/publicline/board.js'

export default {
  components: { boardTitle },
  data() {
    return {
      isLoading: true,
      info: {},
      queryParams: {}
    }
  },
  methods: {
    // 晨会看板-日看板-维系
    async getMorningDaySustain(params) {
      this.isLoading = true
      this.queryParams = params
      const res = await morningDaySustain(params)
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
        this.isLoading = false
      }
    },
    openPeopleDetail(type, value = 0, mvalue = 0, hb = 0) {
      this.$open.call(this, '/publicline/board/personal',
        {
          ...this.queryParams,
          type: type,
          flag: 'morning',
          value, mvalue, hb
        }
      )
    }
  }
}
</script>
